<script lang="ts" setup>
import noJoin from '@/assets/svg/no-join.svg'
import icon_fullAssociation from '@/assets/svg/icon_full-association.svg'
import icon_intersect from '@/assets/svg/icon_intersect.svg'
import icon_leftAssociation from '@/assets/svg/icon_left-association.svg'
import icon_rightAssociation from '@/assets/svg/icon_right-association.svg'
import icon_add_outlined from '@/assets/svg/icon_add_outlined.svg'
import joinJoin from '@/assets/svg/join-join.svg'
import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
import { PropType, ref } from 'vue'
import { useI18n } from '@/hooks/web/useI18n'
import type { Field } from '@/api/chart'
import { fieldType } from '@/utils/attr'
import { iconFieldMap } from '@/components/icon-group/field-list'
const unionTypeFromParent = ref('left')
const { t } = useI18n()
const iconName = {
  left: icon_leftAssociation,
  right: icon_rightAssociation,
  inner: icon_intersect,
  full: icon_fullAssociation
}
const props = defineProps({
  tableName: {
    type: String,
    default: 'left'
  },
  parentFieldList: {
    type: Array as PropType<Field[]>,
    default: () => []
  },
  nodeFieldList: {
    type: Array as PropType<Field[]>,
    default: () => []
  },
  node: {
    type: Object,
    default: () => ({})
  }
})

const unionOptions = [
  { label: t('dataset.left_join'), value: 'left' },
  { label: t('dataset.right_join'), value: 'right' },
  { label: t('dataset.inner_join'), value: 'inner' },
  { label: t('dataset.full_join'), value: 'full' }
]

const init = () => {
  unionTypeFromParent.value = props.node.unionType
  if (props.node.unionFields.length < 1) {
    addUnion()
  }
}
const emit = defineEmits(['changeUnionFields', 'changeUnionType'])
const addUnion = () => {
  emit('changeUnionFields')
}
const removeUnionItem = index => {
  emit('changeUnionFields', index)
}

init()
</script>

<template>
  <div class="union-container">
    <div class="union-header">
      {{ t('dataset.union_relation') }}
      <div class="union-header-operator">
        <el-select
          v-model="unionTypeFromParent"
          class="union-selector"
          @change="emit('changeUnionType', unionTypeFromParent)"
        >
          <template #prefix>
            <el-icon>
              <Icon
                ><component
                  class="svg-icon"
                  :is="iconName[unionTypeFromParent] || noJoin"
                ></component
              ></Icon>
            </el-icon>
          </template>
          <el-option
            v-for="item in unionOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-button type="primary" class="union-add" @click="addUnion">
          <template #icon>
            <el-icon>
              <Icon name="icon_add_outlined"><icon_add_outlined class="svg-icon" /></Icon>
            </el-icon>
          </template>
          {{ t('dataset.add_union_field') }}
        </el-button>
      </div>
    </div>
    <div class="union-body">
      <div class="union-body-header">
        <span class="column" :title="tableName">{{ tableName }}</span>
        <span class="column" :title="node.tableName">{{ node.tableName }}</span>
      </div>
      <div class="union-body-container">
        <div v-for="(field, index) in node.unionFields" :key="index" class="union-body-item">
          <!--左侧父级field-->
          <span class="column">
            <el-select
              v-model="field.parentField"
              :placeholder="t('dataset.pls_slc_union_field')"
              filterable
              value-key="originName"
              clearable
              class="select-field"
            >
              <el-option
                v-for="item in parentFieldList"
                :key="item.originName"
                :label="item.name"
                :value="item"
              >
                <el-icon>
                  <Icon
                    ><component
                      class="svg-icon"
                      :class="`field-icon-${fieldType[item.deType]}`"
                      :is="iconFieldMap[fieldType[item.deType]]"
                    ></component
                  ></Icon>
                </el-icon>
                <span>
                  {{ item.name }}
                </span>
              </el-option>
            </el-select>
          </span>
          <el-icon>
            <Icon name="join-join"><joinJoin class="svg-icon" /></Icon>
          </el-icon>
          <!--右侧孩子field-->
          <span class="column">
            <el-select
              v-model="field.currentField"
              :placeholder="t('dataset.pls_slc_union_field')"
              filterable
              clearable
              value-key="originName"
              class="select-field"
            >
              <el-option
                v-for="item in nodeFieldList"
                :key="item.originName"
                :label="item.name"
                :value="item"
              >
                <el-icon>
                  <Icon
                    ><component
                      class="svg-icon"
                      :class="`field-icon-${fieldType[item.deType]}`"
                      :is="iconFieldMap[fieldType[item.deType]]"
                    ></component
                  ></Icon>
                </el-icon>
                <span>
                  {{ item.name }}
                </span>
              </el-option>
            </el-select>
          </span>

          <span class="column-last">
            <el-button
              v-if="node.unionFields && node.unionFields.length > 1"
              text
              @click="removeUnionItem(index)"
            >
              <template #icon>
                <Icon name="icon_delete-trash_outlined"
                  ><icon_deleteTrash_outlined class="svg-icon"
                /></Icon>
              </template>
            </el-button>
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.union-container {
  height: 275px;
  font-family: var(--de-custom_font, 'PingFang');
}
.union-header {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;
  margin-bottom: 8px;
  color: var(--deTextPrimary, #1f2329);
  font-size: 16px;
  font-weight: 500;
}
.union-header-operator {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;

  .select-svg-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    z-index: 2;
    transform: translateY(-50%);
  }
}
.union-selector {
  width: 180px;
  :deep(.ed-select__prefix) {
    font-size: 22px;
    &::after {
      display: none;
    }
  }
}
.union-add {
  margin-left: 12px;
}
.union-body {
  height: 240px;
  width: 100%;
}
.union-body-header {
  height: 22px;
  display: flex;
  align-items: center;
  font-size: 14px;
  font-family: var(--de-custom_font, 'PingFang');
  font-style: normal;
  font-weight: 400;
  margin: 20px 0 8px 0;
  color: var(--deTextSecondary, #1f2329);
}
.union-body-header .column {
  width: 364px;
  display: inline-block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  &:nth-child(2) {
    margin-left: 37px;
  }
}
.union-body-header .column-last {
  width: 40px;
  text-align: center;
}
.union-body-container {
  height: 180px;
  overflow-y: auto;
}
.select-field {
  width: 364px;
  display: inline-block;
}
.union-body-item {
  height: 32px;
  align-items: center;
  display: flex;
  margin-bottom: 8px;
  font-size: 18px;
  & > .ed-icon {
    margin: 0 9px;
  }
}
.union-body-item .column {
  width: 364px;
  display: inline-block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.union-body-item .column-last {
  margin-left: auto;

  :deep(.ed-icon) {
    font-size: 16px;
    color: var(--deTextSecondary, #646a73);
  }
}
</style>
